<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery2.1.4.js"></script>
  <script src="js/index.js"></script>
	<script>
	(function (doc, win, width) {
		var docEl = doc.documentElement;
		var head = doc.getElementsByTagName("head")[0];
		var hFirst = head.firstChild || head.firstElementChild;
		var cssEl = doc.createElement('style');
		//手机横屏，竖屏可在此处设置 
		var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
		var recalc = function () {
			var x;
			var n = win.devicePixelRatio;
			if (n >= 3) {
				x = 3;
			} else if (n >= 2) {
				x = 2;
			} else {
				x = 1;
			}
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;

      if(clientWidth>750) clientWidth = 750;

			var pxPerRem = 100 * (clientWidth / width);
			cssEl.innerHTML = 'html{ font-size:' + pxPerRem + 'px!important; }';
			docEl.setAttribute("data-dpr", x); //x 限制范围取值 1,2,3
			head.appendChild(cssEl);
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window, 375)
	</script>
<style>
  *{ margin:0; padding:0; box-sizing: border-box; }
  html,body{ 
    width: 100%; 
    min-height: 100%; 
  }
  .bgimg{
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    margin:0 auto;
  }
  .wrap{
    position: absolute;
    width: 100%;
    max-width: 750px;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    top:0;
    height:auto;
  }




div{
  text-align: center;
}
.wrap>div{
	position: absolute;
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center
}

input{
    margin-bottom: .1rem;
    width: 70%;
    display: block;
    background: #FFF1E5;
    border-radius: .12rem;
    line-height: .4rem;
    border: 1px solid #FF9336;
    text-align: center;
    color: #FFA150;
    font-size: inherit;
}
input::placeholder{

    color: #FFA150;
}
ul{
  width:70%;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li{
    width: 48%;
    background: #F6F6F6;
    display: inline-block;
    border: 1px solid #B9B9B9;
    padding: .12rem .1rem;
    border-radius: .12rem;
    font-size: .14rem;
    line-height: .2rem;
    margin-bottom: .08rem;
}
ul li:last-child{

    line-height: .4rem;

}
ul li.active{
  color:#FFF;
  background:#FFA250;
  border-color:#FFA250;
}
.box1{ height: 16.5%; top:7.9%; }
.box2{  text-align: center; top:38.55%;}
.box3{  text-align: center; top:70.55%;}
.box4{ text-align: center; top:80.1%;}
.box5{ height:600px; border: 1px solid green; text-align: center; top:4600px;}
</style>

</head>
<body>

  <div class="wrap">
    <img src="images/bg.png" alt="" class="bgimg">
    <div class="box1">
    <div style='color:#FFC99A;font-size:.24rem;margin-bottom: .25rem;
    margin-top: .48rem;font-weight: bold'>
      <span style='font-size:.35rem;padding:0 .05rem' class='time_f'>15</span>分<span style='font-size:.35rem;padding:0 .05rem' class='time_m'>00</span>秒
    </div>
      <div style="color: #C8C8C8; margin-bottom:.25rem;margin-top:.16rem">
      <p style="font-size:.14rem;">目前已有 <span style='color:#FF9F4B'>767</span>人成功报名</p>
      </div> 
      <input type="text" placeholder="请输入您的姓名（信息已加密）" >
      <input type="text" placeholder="请输入手机号（信息已加密）" >
      <input type="text" placeholder="请输入公司名称（信息已加密）">
      <div style="    margin-top: .25rem;margin-bottom:.15rem;
    color: #FF9538;">选择你当前的职位</div>
      <ul>
        <li class='active'>董事长<br>总经理/负责人</li>
        <li>副总<br>股东/合伙人</li>
        <li>营销总监<br>经理</li>
        <li>其他</li>
      </ul>
    </div>

    <div class="box2">
      <input type="text" placeholder="请输入手机号（信息已加密）" style='width:88%;'>
    </div>

    <div class="box3">
<input type="text" placeholder="请输入手机号（信息已加密）" style='width:84%;'>
    </div>

    <div class="box4">
<div style='color:#FFC99A;font-size:.24rem;margin-bottom: .25rem;
    margin-top: .48rem;font-weight: bold'>
      <span style='font-size:.35rem;padding:0 .05rem' class='time_f'>15</span>分<span style='font-size:.35rem;padding:0 .05rem' class='time_m'>00</span>秒
    </div>
      <div style="color: #C8C8C8; margin-bottom:.25rem;margin-top:.16rem">
      <p style="font-size:.14rem;">目前已有 <span style='color:#FF9F4B'>767</span>人成功报名</p>
      </div> 
      <input type="text" placeholder="请输入您的姓名（信息已加密）" >
      <input type="text" placeholder="请输入手机号（信息已加密）" >
      <input type="text" placeholder="请输入公司名称（信息已加密）">
      <div style="    margin-top: .25rem;margin-bottom:.15rem;
    color: #FF9538;">选择你当前的职位</div>
      <ul>
        <li class='active'>董事长<br>总经理/负责人</li>
        <li>副总<br>股东/合伙人</li>
        <li>营销总监<br>经理</li>
        <li>其他</li>
      </ul>
    </div>
  </div>
</body>
</html>
<script>
var num_f=14
var num_m=60
var box1=document.getElementsByClassName('box1')[0]
var box1_li=document.getElementsByTagName('li')

$('.box1').find('li').click(function(){
  this.className="active"
$(this).siblings().removeClass()
})
$('.box4').find('li').click(function(){
  this.className="active"
$(this).siblings().removeClass()
})

$('.time_f').text(15)
$('.time_m').text('00')
setInterval(function(){
  num_m-=1
  if(num_m<10&&num_m>0){
    let n='0' +num_m
    $('.time_m').text(n)
  }else if(num_m==0){
    let n='0' +num_m
    $('.time_f').text(num_f)
    $('.time_m').text(n)
  }else if(num_m<0){
    num_m=59
    num_f-=1
        $('.time_f').text(num_f)
    $('.time_m').text(num_m)
  }else{
    $('.time_f').text(num_f)
    $('.time_m').text(num_m)
  }
  if(num_f<=0){
    num_f=14
    num_m=60
    $('.time_f').text(15)
$('.time_m').text('00')
  }
},1000)
</script>